<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="shortcut icon" href="/static/paper/favicon.ico">
    <link rel="stylesheet" href="/static/paper/plugins/element-ui/index.css" />
    <link rel="stylesheet" href="/static/paper/styles/common.css">
    <link rel="stylesheet" href="/static/paper/styles/register.css"> <!-- 新的样式文件 -->
    <link rel="stylesheet" href="/static/paper/styles/icon/iconfont.css" />
    <style>
        .register-container {
            max-width: 400px;
            margin: 100px auto;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <div id="register-app" class="register-container">
        <h2>注册</h2>
        <el-form ref="registerForm" :model="registerForm" :rules="registerRules">
            <el-form-item label="账号" prop="username"> <!-- 账号 -->
                <el-input v-model="registerForm.username" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name"> <!-- 修改为姓名 -->
                <el-input v-model="registerForm.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="confirmRegister">确定</el-button>
                <el-button @click="goToLogin">取消</el-button>
            </el-form-item>
        </el-form>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <script src="/static/paper/plugins/element-ui/index.js"></script>
    <script src="/static/paper/plugins/axios/axios.min.js"></script>
    <script src="/static/paper/api/login.js"></script> <!-- 假设您有一个注册 API -->
    <script>
        new Vue({
            el: '#register-app',
            data() {
                return {
                    registerForm: {
                        name: '', // 修改为姓名
                        username: '', // 后端接收的字段保持不变
                        password: ''
                    }
                }
            },
            computed: {
                registerRules() {
                    return {
                        username: [
                            { required: true, message: '请输入账号', trigger: 'blur' }
                        ],
                        name: [ // 添加姓名的验证规则
                            { required: true, message: '请输入姓名', trigger: 'blur' }
                        ],
                        password: [
                            { required: true, message: '请输入密码', trigger: 'blur' }
                        ]
                    };
                }
            },
            methods: {
                async confirmRegister() {
                    this.$refs.registerForm.validate(async (valid) => {
                        if (valid) {
                            try {
                                const response = await registerApi(this.registerForm);
                                if (response.status === 'success') {
                                    this.$message.success(response.msg);
                                    this.goToLogin(); // 注册成功后跳转到登录
                                } else {
                                    this.$message.error(response.msg || '注册失败');
                                }
                            } catch (error) {
                                console.error("注册请求错误:", error);
                                this.$message.error('注册失败，请重试');
                            }
                        }
                    });
                },
                goToLogin() {
                    window.location.href = '/static/paper/page/login/login.html'; // 替换为您的登录页面路径
                }
            }
        })
    </script>
</body>

</html>
